<template>
    <div>
      <el-popover
          placement="bottom"
          :width="300"
          trigger="click"
      >
        <template #reference>
            <el-badge :value="value" :max="max" :is-dot="isDot">
              <component :is="`el-icon-${toLine(icon)}`" ></component>
            </el-badge>
        </template>
        <template #default>
          <slot></slot>
        </template>
      </el-popover>
    </div>
</template>

<script setup lang="ts">
import { toLine } from '../../utils/index'
  defineOptions({
    name: 'Notification'
  })

  let props =defineProps({
    value: {
      type: [String, Number],
      default: ''
    },
    max: {
      type: Number,
      default: 50
    },
    isDot: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'Bell'
    }
  })
</script>

<style scoped>

</style>
